@extends("backend.layout.main")

@section("after.css")
<link type="text/css" href="/backend/css/jquery.treeview.css" rel="Stylesheet">
<script src="/backend/js/jquery.hDialog.min.js"></script>
<script src="/backend/js/jquery.treeview.js"></script>
<!--<script src="/backend/js/jquery.ui.js"></script>-->
@endsection

@section("right_content")

<style>
.modal .modal-dialog{position: absolute; top: 30px; left: 50%; margin-left:-260px;z-index: 9; position: relative;}
.modal .modal-dialog #HCloseBtn{width:24px;height:24px;line-height:24px;display:inline-block;cursor:pointer;background-color:#fff;color:#666;font-size:1.4em;text-align:center;position:absolute;top:0px;right:0px;}
.modal .modal-dialog #HCloseBtn span{font-size:20px;display:inline-block;}
</style>


<!--middle-->
<div class="mainWrapBox">
	<div class="mainBox">
		<h1><a href="">公司设置</a> / 组织与员工管理</h1>

		<div class="index-cen mt10 clearfix">
			<!--dementpart-->
			<div class="group-left mr10" id="main-left">
				<div class="group-lefta mb20">
						<h2 style="margin: 0;">部门列表
							<span class="f_r adddivision"><a  class="btn green add-department">创建部门</a></span>
						</h2>
						<div class="mt10 group-ov">
							<ul class="treeview" id="tree">
								<li id="tree2" class="collapsable"></li>
								<li class="last">
									<span>
										<strong>公司访客</strong>
									</span>
								</li>
							</ul>
						</div>
				</div>
			</div>


			@include('backend.department.edit')
            <div class="group-right" id="main-right">
                <div class="group-righta">
                    <h2 style="margin: 0;">
                          <span id="deptNameTitle" style="font-size: inherit;">全公司</span>

                          <span class="f_r">
                            <span class="search_divs">
                                <input class="input" style="width: 200px;" placeholder="搜索" id="keyword">
  
                            </span>
                            &nbsp;&nbsp;
                           <span class="addEmployeeBtn">
                            <a href="###" class="btn green" id="addEmployeeBtn">添加员工</a>
                           </span>
                        </span>

                    </h2>
                    <input type="hidden" id="deptIdTitle">
                    <input type="hidden" id="type" value="3">
   
                    <div class="group-rb">
                        <input type="hidden" name="start" id="start" value="0">
                        <input type="hidden" name="limit" id="limit" value="20">

                        <div id="deptUserList">
							<table cellpadding="0" cellspacing="0" class="table left" id="yuang_table">
								<thead class="table-header">
								<tr>
									<th style="width: 50px">
										<input type="checkbox" class="group-io" id="checkAll"></th>
									<th style="width: 70px">姓名</th>
									<th style="width: 200px">邮箱</th>
									<th style="width: 100px">部门</th>
									<th style="width: 100px">职务</th>
									<th style="width: 100px">直属上级</th>
									<th style="width: 100px">角色组</th>
									<!-- <th style="width: 150px">最近登录时间</th> -->
									<th style="width: 100px">操作</th>
								</tr>
								</thead>
								<tbody class="table-body">
								</tbody>
							</table>
						</div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<script type="text/javascript" src="/backend/js/jquery.treeview.js"></script>
<!--
<script type="text/javascript" src="/backend/js/jquery.hDialog.min.js"></script>
<script type="text/javascript" src="/backend/js/jquery.ui.js"></script>
-->
<script type="text/javascript">

//部门列表
function queryDepartment() {
    $.ajax({
		
        url: "backend/department/departmentlist",
        type: 'GET',
        dataType: 'json',
        cache:false,
        success: function (data) {
            var tree = '<span><strong>全公司</strong></span><div class="group-pa" data-id="0" data-name="全公司"><span class="group-pa3"></span></div>';
            tree += deptsTreeHtml(data.deptsTree);
            //console.log(tree);
            $("#tree2").html(tree);
            $("#listDept").html(deptsListHtml(data.depts));
            $("#listDept2").html(deptsListHtml(data.depts));
            listDept = data.depts;
            $(".treeview").treeview({
                collapsed: false,
                animated: "medium",
                control: "#sidetreecontrol",
                persist: "location",

            });
        }
    });
}
function deptsListHtml(depts) {
    var html = '';
    $.each(depts, function (index, ele) {
        html += "<li data-id='" + ele.id + "'><a href='javascript:;'>" + ele.name + "</a>"
                + "<span class='right gouxuan'></span></li>";
    });
    html += '';
    return html;
}

function deptsTreeHtml(depts) {
    var html = '<ul class="treeview">';
    $.each(depts, function (index, ele) {
        html += "<li><span><strong>" + ele.name + "</strong></span>"
                + "<div class='group-pa' data-id='" + ele.id + "'data-name='" + ele.name + "'>"
                + "<span class='group-pa3'></span>"
                + "<span class='group-pa2'></span>"
                + "<span class='group-pa1'></span>"
                + "</div> ";
        if (ele.childDepartment.length > 0) {
            html += deptsTreeHtml(ele.childDepartment);
        }
        html += "</li>";
    });
    html += '</ul>';
    return html;
}

// 编辑/保存部门 
function saveType(){
	var name = $('#name').val();
	if($.trim(name) == ''){
		alert('请填写名称');
		return false;
	}
	
	var param = $("#editForm").serialize();
	
	$.post('backend/department', param, function(d){
		queryDepartment();
		$("#deptModal").hide();
	})
}

function getMember(department_id){
	
	var html = '';
	$.get('backend/department/getmember/'+department_id, '', function(json){
		
		objdata=eval(json);
		$.each(objdata, function(k,val){
			html +='<tr><td><div class="content-2line"><input type="checkbox" value="'+ val.uid +'" name="userId"  onclick="selectUser(this)" ></div></td>'
			+'<td>'+ val.username +'</td>'
			+'<td><div class="content-2line"></div></td>'
			+'<td><div class="content-2line">'+ val.department_name +'</div></td>'
			+'<td><div class="content-2line"></div></td>'
			+'<td><div class="content-2line"></div></td>'
			+'<td><div class="content-2line"></div></td>'
			+'<td><a href="javascript:;" class="editDeptUser" data-id ="'+ val.uid +'"  a_id="'+val.uid+'">编辑</a>&nbsp;&nbsp;<a href="javascript:;" class="keaveDeptUser" data-id="'+ val.uid +'">禁用</a></td>'
			+'</tr>';
		})
		$('.table-body').html(html);
	})
}

$(function(){
    
     $("#tree").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            },
            animated: "fast",
        });

        /*部门弹框js---end-*/
         $("#listDept").delegate("li", "click", function () {
            $("#pid").val($(this).attr("data-id"));
            $("#pname").val($(this).find("a").text());
            $(this).closest(".Pop_up_box").hide();
        });

        $('body').click(function(){
            $('.Pop_up_box').hide();
        }); 

         $("#tree").delegate("li strong", "mouseenter", function (e) {
                $(this).parent().siblings(".group-pa").show();
                $(this).parents("ul").siblings(".group-pa").hide();
            });
        $("#tree").delegate("li", "mouseleave", function (e) {
                $(this).children(".group-pa").hide();
          });
		
		// 节点点击 获取部门用户
		$("#tree").delegate("li>span", "click", function (e) {
			e.preventDefault();

			var id = $(this).siblings(".group-pa").attr("data-id");
			var name = $(this).siblings(".group-pa").attr("data-name");
				
				$('#deptNameTitle').html(name);
				getMember(id);
		});

		//添加部门重置 
         function formReset() {
            $("#editForm")[0].reset();
            $("#pid").val("");
            $("#id").val("");
          }

		/* 
			添加部门 
		*/
		$('.add-department').click(function(){
			formReset();
			$("#deptModal").show();
		})
		/**
		 *添加子部门
		 */
		$("#tree").delegate("span[class='group-pa3']", "click", function () {
			formReset();
			var pid = $(this).parent("div").attr("data-id");
			var pname = $(this).parent("div").attr("data-name");

			$("#pid").val(pid);
			$("#pname").val(pname);
			$("#deptModal").show();
		});
		
		$("#deptModal").delegate("#pname", "click", function () {
			$("#deptModal .Pop_up_box").show();
			event.stopPropagation();
        });
		/**
		 *编辑部门
		 */
		$("#tree").delegate("span[class='group-pa2']", "click", function () {
			formReset();
			var pid = $(this).parent("div").attr("data-id");
			var pname = $(this).parent("div").attr("data-name");
	
			$("#id").val(pid);
			$("#pid").val(pid);
			$("#name").val(pname);
			$("#deptModal").show();
		});
         
	 //删除部门
       $("#tree").delegate("span[class='group-pa1']", "click", function () {
        var id = $(this).parent("div").attr("data-id");
        
		if (confirm("确定要删除这个部门吗?")) {

		   $.post('backend/department/'+id, {'_method': 'delete'}, function(){
				
				queryDepartment();
			})
        }
		
     });
	 
	 // 编辑用户
	  $('.table-body').on('click', '.editDeptUser',function(){

        var _Token="{{ csrf_token() }}";
			$('input[name=user_id]').val($(this).attr('a_id'));
        var id=$(this).attr('a_id');
        $.ajax({
            type: "POST",
            url: "/backend/memberdata",
            data: {id: id},
            dataType: 'json',
            success: function(data){

				$("#email").val(data.email);
                $("#phone").val(data.phone);
                $("#username").val(data.username);
                $("#wechat").val(data.wechat);
                $("#birthday").val(data.birthday);
                $("#joinDate").val(data.entrytime);
                $("#userId").val(data.uid);

				$("#sex"+data.sex).attr('checked',true);
				$("#gid"+data.gid).attr('checked',true);
				
				$('#addEmployeeModal').show();
            }
        });
      });
      
      $('.perMesg').mouseenter(function(){
        $(this).find('dd').addClass('showTrsm');
      }).mouseleave(function(){
        $(this).find('dd').removeClass('showTrsm');
      })
	 
	 queryDepartment();
	 getMember(0);
});
  
</script>

@endsection